<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Move</title>
    <style>
        *{margin: 0;
        padding: 0;}
        .box{
            width: 100px;
            height: 100px;
            background: red;
            position: fixed;
            right: 0;
            bottom: 0;
        }
        body {
            height: 5000px;
        }
    </style>
</head>
<body>
    <div id='box' class="box"></div>
    <script>
        function getStyle(obj, styleName){
            return obj.currentStyle?obj.currentStyle[styleName]:getComputedStyle(obj)[styleName];
        };
        var box = document.getElementById('box');
        box.onclick = backTop
        function backTop(){
            var t;
            clearInterval(t);
            t = setInterval(function(){
                var top = document.body.scrollTop || document.documentElement.scrollTop;
                if(top <= 0) clearInterval(t);
                top-=100;
                document.body.scrollTop = top;
                document.documentElement.scrollTop = top;
            },3)
        }
        // move({
        //     target: box,
        //     to: 500
        // })
        function move(opt){
            var defaultOpt = {
                styleName: 'marginLeft',
                to: 500,
                tim: 20
            };
            opt.styleName = opt.styleName || defaultOpt.styleName;
            opt.to = opt.to || defaultOpt.to;
            opt.tim = opt.tim || defaultOpt.tim;
            var t;
            t = setInterval(function(){
                var curr;
                curr = parseInt(getStyle(opt.target, opt.styleName));
                if(curr == opt.to){
                    clearInterval(t);
                }
                var speed = Math.abs(opt.to - curr)/5;
                speed = speed < 1 ? Math.ceil(speed):Math.floor(speed);
                (opt.to < curr) && (speed = -speed);
                opt.target.style[opt.styleName] = curr + speed + 'px';
            },opt.tim)
        }
    </script>
</body>
</html>